<template>
    <div class = "order-stores">
        <!--顶部-->
        <div class = "stores_top">
            <!--标题-->
            <div class = "stores_top_tit">
                <span>{{ shop.zhicheng }}</span>
            </div>
            <!--门店内容-->
            <div class = "stores_top_container">
                <!--内容左侧-->
                <div class = "stores_top_container_left">
                    <span> <img src = "../../../static/images/user-green.png" /> {{ shop.realname }}</span>
                    <span> <img src = "../../../static/images/phone-green.png" /> {{ shop.phone }}</span>
                </div>
                <!--内容右侧-->
                <div class = "stores_top_container_right">
                    <img src = "../../../static/images/location-green-dot.png" />
                    <span>{{ shop.address }}</span>
                </div>
            </div>
        </div>
        <!--订单循环内容-->
        <van-list v-model="confirm.loading" :finished="confirm.finished" finished-text="没有更多了" @load="reqeustShopOrderList">
            <normal-order-list v-for="(item, index) in confirm.dataset" :key="index"
                :ibase="item.base" :dataset="item.items" :textType="item.base.textType" :index="index" class="el-item"
            />
        </van-list>
    </div>
</template>

<script>
    import { List } from 'vant';

    import NormalOrderList from '../../components/currency/order-item/normal-list-salesman.vue';

    export default {
        name: "SalesmanOrderStores",
        components: {
            [List.name]: List,
            NormalOrderList
        },
        data() {
            return {
                shop: {},
                confirm: {
                    page: 0, limit: 10,
                    loading: false, finished: false,
                    textType: 'confirm',
                    dataset: []
                }
            }
        },
        created() {
            this.requestShopDetails();
        },
        methods: {
            reqeustShopOrderList() {
                var url = '/api/home/order/getlist',
                    params = {
                        shop_id: this.$route.query.id,
                        page: this.confirm.page, list_rows: this.confirm.limit,
                        token: this.$store.state.options.user.token
                    };
                    
                this.$util.postRequestInterface(url, params, (res) => {
                    if(!res.data) {
                        this.confirm.loading = false;
                        this.confirm.finished = true;
                        return;
                    }

                    for(let x of res.data.data) {
                        let items = [], textType = '';
                        for(let y of x.detail) {
                            items.push({
                                title: y.garbagename,
                                number: y.weighting_method == 1 ? y.weighting_num : '',
                                weight: y.weighting_method == 0 ? y.weighting_num : '',
                                time: this.$moment(x.create_time * 1000).format('YYYY-MM-DD'),
                            });
                        }
                        switch(x.status) {
                            case 1:
                                textType = 'collect';
                                break;
                            case 3:
                                textType = 'confirm';
                                break;
                            case 5:
                                textType = 'complete';
                                break;
                        }
                        this.confirm.dataset.push({
                            base: {
                                id: x.id,
                                number: x.ordernumber,
                                amount: x.price,
                                textType
                            },
                            items
                        });
                    }
                    if(this.confirm.dataset.length >= res.data.count) this.confirm.finished = true;
                    
                    this.confirm.page++;
                    this.confirm.loading = false;
                });
            },
            requestShopDetails() {
                var url = '/api/home/user/getoneS',
                    params = {
                        token: this.$route.query.token
                    };
                
                this.$util.postRequestInterface(url, params, (res) => {
                    this.shop = res.data;
                });
            }
        }
    }
</script>

<style scoped lang = "scss">
    .order-stores {
        width: 100%;
        /*顶部*/
        .stores_top {
            padding: 1rem 1rem 1.6rem;
            border-bottom: 0.4rem solid #F4F4F4;

            /*顶部标题*/
            .stores_top_tit {

                span {
                    font-size: 1.7rem;
                    color: #333333;
                    font-weight: 500;
                }
            }

            /*顶部下部内容*/
            .stores_top_container {
                display: flex;
                margin-top: 1.4rem;
                /*内容左侧*/
                .stores_top_container_left {
                    width: 40%;
                    display: flex;
                    flex-direction: column;
                    border-right: .1rem solid #EEEEEE;

                    span {
                        font-size: 1.3rem;
                        color: #999999;
                        display: flex;
                        align-items: center;

                        img {
                            width: 1.1rem;
                            height: 1.2rem;
                            margin-right: 0.6rem;
                        }
                    }

                    span:last-child {
                        margin-top: 0.8rem;
                    }
                }

                /*内容右侧*/
                .stores_top_container_right {
                    display: flex;
                    align-items: center;

                    img {
                        width: 1.8rem;
                        height: 1.8rem;
                        margin: 0 1.2rem;
                    }

                    span {
                        font-size: 1.3rem;
                        color: #666666;
                    }
                }
            }
        }

        .el-item {
            padding: 0rem 1rem;
        }
    }
</style>